<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/webjars/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/4.4.1-1/css/bootstrap.min.css">
    <script>
        $(function (){
            //全选的实现jQuery
            $("#all").click(function (){
                let flag=$(this).prop("checked");
                $("input[name='chk']").prop("checked",flag);
                //$("input[name='chk']").prop("checked",$(this).prop("checked"));
            })
            //批量删除按钮
            $(".btn-danger").click(function (){
                //判断是否选择
                let arr= $("input[name='chk']:checked");
                if(arr.length == 0){
                    alert("请选择要删除的数据！");
                    return;
                }else {
                   let ids="";  //undifined1,2,3
                    //遍历name为chk且被选择的复选框的值
                   $("input[name='chk']:checked").each(function (){
                         ids+=$(this).val()+",";
                   })
                   alert(ids);
                   if(confirm("此操作将影响多个数据，确认要执行吗？")){
                       $.get(
                           "/user/batch_del/"+ids,
                           function (obj){
                               if(obj){
                                    alert("删除成功！");
                                    location.reload();
                               }else{
                                   alert("删除失败！");
                               }
                           }
                       )
                   }
                }

            });
            //修改
            $(".btn-primary").click(function (){
                let id=$(this).val();
                alert(id);
                location.href="/user/find/"+id;
            })

            //删除
            $(".btn-warning").click(function (){
                if(confirm("确认要删除吗？")){
                    let id = $(this).val();
                    alert(id);
                    $.get(
                        "/user/delete/"+id,

                        function (obj){
                            alert(obj);
                            if(obj){
                                alert("删除成功！");
                                location.reload();
                            }else{
                                alert("删除失败！");
                            }
                        }
                    )
                }
            })
        })
    </script>
</head>
<body>
    <div class="container">
        <table class="table table-hover table-bordered">
            <tr>
                <th>
                    <input type="checkbox" id="all" >全选
                    <button class="btn btn-danger" >删除</button>
                </th>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>生日</th>
                <th>头像</th>
                <th>
                    <button class="btn btn-success" onclick="location.href='/user/add'">添加</button>
                </th>
            </tr>
                <#list pager.records as user>
            <tr>
                    <td><input type="checkbox" name="chk" value="${user.id}"></td>
                    <td>${user.id}</td>
                    <td>${user.name}</td>
                    <td>
                        <#if user.sex == 0>
                            男
                        <#else>
                            女
                        </#if>
                       </td>
                    <td>${(user.birthday ? string("yyyy-MM-dd"))!}</td>
                    <td>

                        <img src="${user.photo}" width="50px" height="50px">

                    </td>
                    <td>
                        <button class="btn btn-primary" value="${user.id}">修改</button>
                        <button class="btn btn-warning" value="${user.id}">删除</button>
                    </td>

              </tr>
            </#list>
           <tr>
               <td colspan="10" align="center">

                           共${pager.total}条数据，共${pager.pages}页，当前第${pager.current}页。
                           <a href="list?offset=1">首页</a>

                           <a  href="list?offset=${pager.current - 1}">上页</a>

                           <a  href="list?offset=${pager.current +1}">下页</a>

                           <a  href="list?offset=${pager.pages}">末页</a>
                       </ul>
                   </nav>
               </td>
           </tr>
        </table>

    </div>
</body>
</html>